define(function(require){
    'use strict';

    var
        _ = require('underscore'),
        Marionette = require('marionette'),
        Utils = require('core/utils');

    return Marionette.Layout.extend({

        className: 'ui-popover',

        defaults: {
            /**
             * start for jquery ui position的参数
             */
            of: null,// 定位的容器

            my: '',// 被定位元素自己的方位

            at: '',// 定位容器的方位

            collision: 'none none',// 超出父容器时，被定位元素的重定位参数
            /**
             * end for jquery ui position的参数
             */

            arrow: 'left-center',// 箭头,12个方向

            data: {},

            callback: function() {}
        },

        initialize: function(options) {
            this.triggerMethod('before:initialize', options);

            this.options = _.extend({}, this.defaults, options);

            this.render();
            this.position();

            this.triggerMethod('initialize', options);
        },

        serializeData: function() {
            return this.options.data || {}
        },

        onBeforeRender: function() {
            if(!this._appendedToBody) {
                this.$el.appendTo($('body'));
                this.listenBodyClick();
                this._appendedToBody = true;
            }
        },

        position: function() {
            var my, at;
            if(this.options.my && this.options.at) {
                my = this.options.my;
                at = this.options.at;
            } else {
                var pos = this.getPosition();
                my = pos.my;
                at = pos.at;
            }
            this.$el.position({
                of: this.options.of,
                my: my,
                at: at,
                collision: this.options.collision
            });

            this.addArrow();
        },

        addArrow: function() {
            this.$el.addClass(this.options.arrow);
            this.$el.append($('<div class="arrow"></div>'));
        },

        getPosition: function() {
            switch(this.options.arrow) {
                case 'left-top': return { my: 'right top', at: 'left top' };
                case 'left-center': return { my: 'right center', at: 'left center' };
                case 'left-bottom': return { my: 'right bottom', at: 'left bottom' };
                case 'bottom-left': return { my: 'left bottom', at: 'left top' };
                case 'bottom-center': return { my: 'center bottom', at: 'center top' };
                case 'bottom-right': return { my: 'right bottom', at: 'right top' };
                case 'right-top': return { my: 'left top', at: 'right top' };
                case 'right-center': return { my: 'left center', at: 'right center' };
                case 'right-bottom': return { my: 'left bottom', at: 'right bottom' };
                case 'top-left': return { my: 'left top', at: 'left bottom' };
                case 'top-center': return { my: 'center top', at: 'center bottom' };
                case 'top-right': return { my: 'right top', at: 'right bottom' };
            }
        },

        // 鼠标点击外部的时候，关闭当前弹出框
        listenBodyClick: function() {
            var that = this;
            setTimeout(function() {
                $('body').on('click.ui.popover.' + that.cid, _.bind(that.autoClose, that));
            }, 0);
        },

        autoClose: function(e) {
            if(e.target !== this.el
                && $(e.target).closest(this.$el).length === 0) {
                this.close();
            }
        },

        onBeforeClose: function() {
            $('body').off('click.ui.popover.' + this.cid);
        }

    });
});
